<template>
  <div class="search_area item">
    <input type="text" v-model="searchInput" v-on:input="resultforInput = false"/><button class="search_btn" @click="searchShow(searchInput)"></button>
    <div class="search_results" v-show="resultforInput">
      <ul>
        <li v-for="(item,index) in resultsArray">
          <span class="search_results_name">{{ index+1 }}.{{ item.name}}</span>
          <span class="search_results_adress">{{ item.adress}}</span>
        </li>
      </ul>
      <div class="search_results_number">找到关于<b>{{ resultsNumber }}</b>条结果</div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "search-for-input",
    data:function () {
      return {
        searchInput:'',
        resultforInput:false,
        resultsArray:[],
        resultsNumber:0
      }
    },
    methods:{
      searchShow:function(item){
        var Array = [{'name':'江苏省测绘地理信息局','adress':'江苏省南京市鼓楼区北京西路75号'},
          {'name':'江苏省测绘地理信息局','adress':'江苏省南京市鼓楼区北京西路75号'},
          {'name':'江苏省测绘地理信息局','adress':'江苏省南京市鼓楼区北京西路75号'},
          {'name':'北京西路与虎踞路交叉口','adress':'江苏省南京市鼓楼区北京西路75号（江苏省测绘地理信息局）'}
        ];
        this.resultsNumber = Array.length;
        this.resultsArray = Array;
        this.resultforInput = true;
      }
    }
  }
</script>

<style scoped>
  .search_area {
    position:absolute;
    top:15px;
    left:50%;
  }
  .search_area input {
    width:260px;
    height:28px;
    border:0;
    background-color:rgba(89,101,107,.9);
    text-indent:10px;
    line-height:28px;
    outline:none;
    color:#ffffff ;
  }
  .search_area .search_btn {
    position:absolute;
    width:45px;
    height: 30px;
    border:0;
    padding:8px;
    color:#ffffff;
    background:url(../../../static/IMG/搜索.png) center no-repeat;
    background-color:#2891bc;
  }
  .search_area .search_results {
    width:240px;
    padding:0 10px;
    border:1px #a09f9e solid;
    border-radius:2px;
    background-color:rgba(89,101,107,.9);
  }
  .search_results ul {
    width:100%;
    margin:0;
    padding:0;
  }
  .search_results ul li {
    min-height:45px;
    padding:10px 0 0 10px;
    list-style:none;
    border-bottom:1px #a8a8a8 solid;
  }
  .search_results_name {
    font-size:14px;
    color:#f6f7f7;
    display:block;
  }
  .search_results_adress {
    font-size:12px;
    color:#c1c2c2;
    display:block;
  }
  .search_results_number {
    height:40px;
    line-height:40px;
    font-size:14px;
    color:#f6f7f7;
    text-indent:10px;
  }
</style>
